.modal {
    position: fixed;
    /* 元素会被移出正常文档流，并不为元素预留空间，
    而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置。
    元素的位置在屏幕滚动时不会改变。
    打印时，元素会出现在的每页的固定位置。
    fixed 属性会创建新的层叠上下文。
    当元素祖先的 transform,perspective 或 filter 属性非 none 时，容器由视口改为该祖先。 */
    /* static 元素在文档常规流中当前的布局位置 */
    width: 300px;
    height: 200px;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    /* auto 让浏览器自己选择一个合适的外边距。有时，在一些特殊情况下，该值可以使元素居中。 */
    border-radius: 5px;
    background: #fff;
    overflow: hidden;
    z-index: 9999;
    box-shadow: inset 0 0 1px 0 #000;
    /* 立体感 inset-内阴影 0 0-偏移量 1px-阴影大小 0-模糊度 */
}

.modal-title {
    height: 50px;
    line-height: 50px;
    padding: 0 10px;
}

.modal-content {
    height: 100px;
    padding: 0 10px;
}

.modal-operator {
    width: 100%;
    height: 50px;
}

.modal-operator-close,
.modal-operator-confirm {
    width: 50%;
    border: none;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    line-height: 50px;
    opacity: 1;
    color: #fff;
    background: rgb(247, 32, 32);
    cursor: pointer;
}

.modal-operator-close:active,
.modal-operator-confirm:active {
    opacity: .6;
    transform: opacity .3s;
}

.mask {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: #000;
    opacity: .6;
    z-index: 9998;
}